
.swiper-container {
  /*  width: 320px;
    height: 480px;*/
  width: 100%;
  height: 100%;
  background:#fff;
  overflow: hidden;

}

.swiper-slide{
  width:100%;
  height:100%;
  background-size:100% 100%;
  position: relative;
}
img{
  display:block;
}
.swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background: #fff;
  opacity: .4;
}
.swiper-pagination-bullet-active {
  opacity: 1;
}
@-webkit-keyframes tipmove{0%{bottom:10px;opacity:0}50%{bottom:15px;opacity:1}100%{bottom:20px;opacity:0}}
.ani{
  position:absolute;
}
.txt{
  position:absolute;
}

/*page1的动画效果*/
#page1-cricle {
  -webkit-animation: page1-cricle 1.5s ease 0s 1 normal, page1-cricle2 20s linear 1.5s infinite alternate;
  -webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes page1-cricle {
  from {
    top: -96px;
  }
  to {
    top: 96px;
  }
}
@-webkit-keyframes page1-cricle2 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(-9deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
  }
  75% {
     -webkit-transform: rotate(9deg);
   }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
#page1-go {
  -webkit-animation: page1-go 1.5s ease 1.5s 1 normal;
  -webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes page1-go {
  from {
    top: 1300px;
    opacity:1;

  }
  to {
    top: 718px;
    opacity:1;
  }
}
#page1-line {
  -webkit-animation: page1-line 1.5s ease 2.5s 1 normal;
  -webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes page1-line {
  from {
    opacity:0;

  }
  to {
    opacity:1;
  }
}
#page1-bird {
  -webkit-animation: page1-bird 1s ease 3.5s 1 normal;
  -webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes page1-bird {
  0% {
    opacity: 0.5;
    -webkit-transform:rotate(-9deg); /* Safari 和 Chrome */

  }
  50% {
    opacity:0.7;
    -webkit-transform:rotate(9deg); /* Safari 和 Chrome */
  }
  100% {
    opacity:1;
    -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
  }
}
/*page2的动画效果*/
#page2-title {
  -webkit-animation: page2-title 1.5s ease 0s 1 normal;
  -webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes page2-title {
  from {
    opacity: 1;
    width:0px;
    height:0px;
  }
  to {
    opacity: 1;
    width:591px;
    height:174px;
  }
}
#page2-text {
  -webkit-animation: page2-text 1.5s ease 1.5s 1 normal;
  -webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes page2-text {
  from {
    opacity: 1;
    width:0px;
    height:0px;
  }
  to {
    opacity: 1;
    width:507px;
    height:267px;
  }
}

#page2-pic1 {
  -webkit-animation: page2-pic1 1.5s ease 3s 1 normal;
  -webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes page2-pic1 {
  0% {
    opacity: 1;
    -webkit-transform:rotate(0deg);
    left:800px;
    top:650px;
  }
  50%{
    opacity: 1;
    -webkit-transform:rotate(360deg);
    left:600px;
    top:540px;
  }
  100% {
    opacity: 1;
    -webkit-transform:rotate(0deg);
    left:436px;
    top:480px;
  }
}
#page2-pic2 {
  -webkit-animation: page2-pic2 1.5s ease 4.5s 1 normal;
  -webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes page2-pic2 {
  0% {
    opacity: 1;
    -webkit-transform:rotate(0deg);
    left:-442px;
    top:800px;
  }
  50%{
    opacity: 1;
    -webkit-transform:rotate(360deg);
    left:200px;
    top:670px;
  }
  100% {
    opacity: 1;
    -webkit-transform:rotate(0deg);
    left:47px;
    top:550px;
  }
}

#page2-bottom {
  -webkit-animation: page2-bottom 1s ease 6s 1 normal;
  -webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes page2-bottom {
  0% {
    opacity: 1;
    top:1010px;
  }
  10% {
    opacity: 1;
    left: -5px;
    top:1050px;
  }
  20% {
    opacity: 1;
    left: 5px;
    top:996px;
  }
  40% {
    opacity: 1;
    left: -5px;
    top:980px;
  }
  40% {
    opacity: 1;
    left: 5px;
    top:966px;
  }
  50% {
    opacity: 1;
    left: -5px;
    top:942px;
  }
  60% {
    opacity: 1;
    left: 5px;
    top:928px;
  }
  70% {
    opacity: 1;
    left: -5px;
    top:914px;
  }
  80% {
    opacity: 1;
    left: 5px;
    top:900px;
  }
  90% {
    opacity: 1;
    left: -5px;
    top:883px;
  }

  100% {
    opacity: 1;
    left:0;
    top:869px;
  }
}
#page2-leftbird {
  -webkit-animation:page2-leftbird 2s ease 7s 1 normal,page2-leftbird2 1s linear 9s infinite alternate;
  -webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes page2-leftbird2{
  0%{
    -webkit-transform: rotate(-15deg);
  }
  50%{
    -webkit-transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(15deg);
  }
}
@-webkit-keyframes page2-leftbird {
  0% {
    opacity: 1;
    left: -50px;
    top:893px;
  }
  10% {
    opacity: 1;
    left: -10px;
    top:903px;
  }
  20% {
    opacity: 1;
    left: 30px;
    top:893px;
  }
  40% {
    opacity: 1;
    left: 60px;
    top:883px;
  }
  40% {
    opacity: 1;
    left: 70px;
    top:893px;
  }
  50% {
    opacity: 1;
    left: 100px;
    top:903px;
  }
  60% {
    opacity: 1;
    left: 140px;
    top:893px;
  }
  70% {
    opacity: 1;
    left: 170px;
    top:883px;
  }
  80% {
    opacity: 1;
    left: 200px;
    top:893px;
  }
  90% {
    opacity: 1;
    left: 240px;
    top:883px;
  }

  100% {
    opacity: 1;
    left: 274px;
    top:893px;
  }
}
#page2-rightbird {
  -webkit-animation:page2-rightbird 2s ease 7s 1 normal,page2-rightbird2 1s linear 9s infinite alternate;
  -webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes page2-rightbird2{
  0%{
    -webkit-transform: rotate(-15deg);
  }
  50%{
    -webkit-transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(15deg);
  }
}
@-webkit-keyframes page2-rightbird {
  0% {
    opacity: 1;
    left: 700px;
    top:893px;

  }
  10% {
    opacity: 1;
    left: 655px;
    top:903px;
  }
  20% {
    opacity: 1;
    left:610px;
    top:893px;
  }
  40% {
    opacity: 1;
    left: 570px;
    top:883px;
  }
  40% {
    opacity: 1;
    left:510px;
    top:893px;
  }
  50% {
    opacity: 1;
    left: 470px;
    top:903px;
  }
  60% {
    opacity: 1;
    left: 425px;
    top:893px;
  }
  70% {
    opacity: 1;
    left: 385px;
    top:883px;
  }
  80% {
    opacity: 1;
    left: 365px;
    top:893px;
  }
  90% {
    opacity: 1;
    left: 340px;
    top:883px;
  }

  100% {
    opacity: 1;
    left: 324px;
    top:893px;
  }
}
#page2-point {
  -webkit-animation:page2-point 50s linear 0s infinite alternate;
  -webkit-animation-fill-mode:forwards;
}

@-webkit-keyframes page2-point {
  0% {
    opacity: 1;
    left: 150px;
    top:200px;
    -webkit-transform: rotate(0deg);
  }
  10% {
    opacity: 1;
    left: 200px;
    top:300px;
    -webkit-transform: rotate(-30deg);
  }
  20% {
    opacity: 1;
    left:250px;
    top:400px;
    -webkit-transform: rotate(0deg);
  }
  40% {
    opacity: 1;
    left: 300px;
    top:450px;
    -webkit-transform: rotate(30deg);
  }
  40% {
    opacity: 1;
    left:350px;
    top:550px;
    -webkit-transform: rotate(0deg);
  }
  50% {
    opacity: 1;
    left: 400px;
    top:600px;
    -webkit-transform: rotate(-30deg);
  }
  60% {
    opacity: 1;
    left: 450px;
    top:650px;
    -webkit-transform: rotate(0deg);
  }
  70% {
    opacity: 1;
    left: 500px;
    top:700px;
    -webkit-transform: rotate(30deg);
  }
  80% {
    opacity: 1;
    left: 550px;
    top:750px;
    -webkit-transform: rotate(0deg);
  }
  90% {
    opacity: 1;
    left: 600px;
    top:800px;
    -webkit-transform: rotate(-30deg);
  }

  100% {
    opacity: 1;
    left: 650px;
    top:900px;
    -webkit-transform: rotate(0deg);
  }
}